<template>
  <div>
    <el-form label-width="80px" :inline="false" size="default">
      <el-form-item label="SPU名称">
        <span></span>
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input type="number" placeholder="请输入价格" clearable></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input type="number" placeholder="请输入重量" clearable></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input size="default" clearable type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="平台属性" >
        <el-form label-width="200px" :inline="true" size="default">
          <el-form-item :label="attr.attrName" v-for="attr in attrList" :key="attr.id">
            <el-select placeholder="请选择" clearable>
              <el-option v-for="item in attr.attrValueList" :key="item.id">{{item.valueName}}</el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form label-width="200px" :inline="true" size="default">
          <el-form-item :label="saleAttr.saleAttrName" v-for="saleAttr in saleAttrSelf" :key="saleAttr.id">
            <el-select placeholder="请选择" clearable>
              <el-option v-for="item in saleAttr.spuSaleAttrValueList" :key="item.id">{{item.saleAttrValueName}}</el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table border stripe :data="SpuImageList">
          <el-table-column type="selection" width="50" />
          <el-table-column label="图片" >
            <template v-slot="{row}">
              <el-image :src="row.imgUrl" fit="fill" style="width:200px" :lazy="true"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName"></el-table-column>
          <el-table-column label="操作"
            ><template v-slot="{ row }">
              <el-button type="primary" size="small">设为默认</el-button>
            </template></el-table-column
          >
        </el-table>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref,onMounted } from "vue";
import { ElMessage } from "element-plus";


export default defineComponent({
  name: "SkuForm",
});
</script>

<script setup lang="ts">
import { reqAttrInfoList, type attrListType } from "@/api/attr";
import {
  reqSaleAttrSelf,
  reqSpuImageList,
  type saleAttrListType,
  type spuImgListType,
} from "@/api/spu";
import type { spuItemType } from "@/api/spu";
import { storeToRefs } from "pinia";

import useCategoryStore from "@/stores/category";
const categoryStore = useCategoryStore();

//拿到当前新增sku的所在的spu的信息
const props = defineProps<{
  spuInfo:spuItemType
}>();
const {category1Id,category2Id,category3Id} =storeToRefs(categoryStore)

//初始化数据
const attrList=ref<attrListType>([])
const saleAttrSelf=ref<saleAttrListType>([])
const SpuImageList=ref<spuImgListType>([])
//初始化数据收集平台属性列表,销售属性列表,spu图片列表
const initData = async () => {
  const p1=reqAttrInfoList(
    category1Id.value as number,
    category2Id.value as number,
    category3Id.value as number
  )

  const p2 = reqSaleAttrSelf(props.spuInfo.id as number);
  const p3 = reqSpuImageList(props.spuInfo.id as number);

 try{
  const result=await Promise.all([p1,p2,p3])
  
  attrList.value=result[0]
  saleAttrSelf.value=result[1]
  SpuImageList.value=result[2]
 }catch(e:any){
    ElMessage.error(e.message)
 }
};

onMounted(() => {
  initData()
})
</script>
